<template>
<div style="" class="flex w-full">
    <a-button type="default" shape="circle" size="large" @click="backparent">
    <ArrowLeftOutlined />
    </a-button>
     
    <div class="flex flex-col ml-4 flex-1">
       <span class="flex mt-2 mb-3" style="font-size:16px">热销课程：{{detailkc.typename}}</span>
      <div class="flex justify-between mt-2">
          <div class="flex " style="width:35%;">
          <img
              style="object-fit: cover;border-radius:.5em;"
              class="cursor-pointer"
              :src="'/js'+detailkc.kcimg"
              />
          </div>
          <div class="flex flex-1 flex-col ml-3 h-full">
              <span class="text-lg font-bold">{{detailkc.kctitle}}</span>
              <div class="mt-1"><a-rate :value="detailkc.dengji" disabled /></div>
              <div class="mt-1 flex">语言类型：
                  <div v-if="detailkc.tags">
                    <div v-for="tag,index in detailkc.tags.split(',')" :key="index">
                    <a-tag color="blue" >{{tag}}</a-tag>
                  </div>
                </div>
                <div v-else>--</div>

              </div>
             
              <span class="mt-1">销量：{{detailkc.basesell+detailkc.realsell}}</span>
               <div class="mt-1 text-lg "><span class="text-red-500">￥{{detailkc.price}}</span></div>
              <div class="flex justify-start items-end mt-5" v-if="detailkc.ukccode==null">
                <div class="flex mt-3">
                  <a-button block type="primary" style="height:36px;width:130px" @click="goorderpage(detailkc.id)"><PayCircleOutlined />立即购买</a-button>
                </div>
                <div class="flex ml-4">
                  <a-button block type="default" style="height:36px;width:130px" @click="addcart(detailkc)"><ShoppingCartOutlined />加入购物车</a-button>
                </div>
              </div>
          </div>
      </div>
      <!-- 下载地址-->
      <div v-if="detailkc.ukccode!=null" class="border-1 border-gray-400  rounded-lg flex w-full mt-3 justify-between items-center" style="height:5em">
          <div class="flex flex ml-10 text-lg font-bold justify-center ">
            {{detailkc.ukccode}}<div class="ml-3"> <a-button  type="default" @click="fuzhi(detailkc.ukccode)">复制激活码</a-button></div>
          </div>

          <div class="flex-1 flex justify-end mr-6">
            <a-button type="primary" @click="openurl(detailkc.baiduurl)">课程下载链接</a-button>
          </div>
      </div>
      <div class="mt-3 font-bold flex items-center "><div class="vline"></div><span class="ml-1 font-bold">课程介绍</span></div>
      <div class="mt-4">
        <MarkdownViewer :value="detailkc.kcdetail"/>
      </div>
    </div>
    <!-- 订单抽屉-->
   
  <a-modal
        centered="true"
        :footer="null"
        width="40%"
        :closable="false"
        :maskClosable="false"
        v-model:visible="visibleD"
        :destroyOnClose="true"
        :after-visible-change="afterVisibleChange"
      >
      <template #title>
          <span style="font-weight: 500; font-size:16px;padding:8px;">订单支付</span>
      </template>
    <OrdercrateAndPay ref="orderRef"  :preorderInfo="preorderInfo"  :status="status"  @changeorderstatus="changeorderstatus" @orderpaysuccess="orderpaysuccess"/>

    
  </a-modal>
</div>
</template>
<script lang="ts">
import { reactive,defineComponent,ref } from 'vue';
import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
import { useMessage } from '/@/hooks/web/useMessage';
import { Checkbox,Modal } from 'ant-design-vue';
import { ArrowLeftOutlined,ShoppingCartOutlined,PayCircleOutlined } from '@ant-design/icons-vue';
import { createOrder,queryOrder,precreateOrder,addusercart } from '/@/api/dp/dpbaseapi';
import { useUserStore } from '/@/store/modules/user';
import OrdercrateAndPay from '/@/views/dp/userorder/ordercreate.vue';
const { showMessage, notification } = useMessage();
import { MarkdownViewer } from '/@/components/Markdown';
export default defineComponent({
 
  name:'KcDetail',
  components: {
 ACheckbox:Checkbox,
  AModal:Modal,
   OrdercrateAndPay,
  }
 
});
</script>

<script lang="ts" setup>
 const userStore = useUserStore();
const props = defineProps({
  
    detailkc:Object

});
const $emit = defineEmits(['closeDetail'])

 const backparent = () => {
    $emit('closeDetail');
  }

const visibleD = ref<boolean>(false);
  const status=ref(0);
  const preorderInfo=ref({});
  async function goorderpage (vipid)  {
      //构建数据
      status.value=0;
      let arrs=[
            {
              ordertype:"2",
              typeid:vipid,
              shuliang:1,
             
            }
          ];

          console.log(arrs[0].typeid);
      let  orderobj={
          title:'课程购买',
          orderdetails:arrs
       };
     
      //查询订单 
    
     const preinfo= await precreateOrder(orderobj);
     console.log(preinfo);
     preorderInfo.value=preinfo;

     visibleD.value = true;
     visible.value = false;
     
  };
  function orderpaysuccess(){
       visibleD.value = false;

   }
    function changeorderstatus(v){
       status.value = v;

   }

 function openurl(url){
    window.open(url, '_blank');
 }

 async function fuzhi(code){
  var aux = document.createElement("input"); 
    aux.setAttribute("value", code); 
    document.body.appendChild(aux); 
    aux.select();
    document.execCommand("copy"); 
    document.body.removeChild(aux);
    showMessage('内容已复制到剪贴板');
 }

 async function addcart(obj){
    var cartobj={
        kcid:obj.id,
        cartnum:1
    };
    try{
    const res=await addusercart(cartobj);
    if(res.result=='true'){
      showMessage('已加入购物车');
        userStore.setCartList();
    }
    }catch(err){

    }
}
</script>
<style lang="less" scoped>
.demo-loadmore-list {
  min-height: 350px;
}

.vline{
  width: 4px;
height: 16px;
opacity: 1;

/* 颜色/主色 */
background: #4080FF;
}


</style>